// components/test/test.js
Component({
  // 定义纯数据字段的规则
  options:{
    // 指定所有以 _ 开头的数据都是纯数据字段
    pureDataPattern:/^_/
  },
  /**
   * 组件的属性列表
   */
  properties: {
    // 第一种方式-简化方式
    // max:Number,
    // 第二种方式--完整方式
    max:{
      type:Number,
      value:10
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    count:0,
    n1:0,
    n2:0,
    sum:0,
    // 定义颜色参数
    _rgb:{
      r:0,
      g:0,
      b:0
    },
    fullColor:"0,0,0"
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 点击事件处理函数
    addCount(){
      if(this.data.count >= this.properties.max) return
      this.setData({
        count:this.data.count + 1
      })
      this._showCount()
    },
    // 自定义方法-自定义方法建议以"_"开头
    _showCount(){
      wx.showToast({
        title: 'count的值是'+this.data.count,
        icon:"none"
      })
    },
    // 监听器测试函数
    addN1(){
      this.setData({
        n1:this.data.n1 + 1
      })
    },
    addN2(){
      this.setData({
        n2:this.data.n2 + 1
      })
    },
    // 更改颜色的方法
    changeR(){ //修改R
      this.setData({
        "_rgb.r":this.data._rgb.r + 5 > 255 ? 255 : this.data._rgb.r + 5
      })
    },
    changeG(){ //修改R
      this.setData({
        "_rgb.g":this.data._rgb.g + 5 > 255 ? 255 : this.data._rgb.g + 5
      })
    },
    changeB(){ //修改R
      this.setData({
        "_rgb.b":this.data._rgb.b + 5 > 255 ? 255 : this.data._rgb.b + 5
      })
    },
    // 生产随机颜色值的方法
    _randomColor(){
      this.setData({
        _rgb:{
          r:Math.floor(Math.random()*256),
          g:Math.floor(Math.random()*256),
          b:Math.floor(Math.random()*256)
        }
      })
    }
  },
  // 监听器的配置
observers:{//监听数据节点
    "n1,n2":function(newN1,newN2){ //监听n1和n2
      this.setData({
        sum:newN1+newN2  //通过监听器，自动计算sum值
      })
    },
    // 监听rgb的变化
    //如果对象上的属性较多可以使用通配符**来监听对象上的变化
    // "rgb.**":function(obj)){
      // this.setData({
      //   fullColor:`${obj.r},${obj.g},${obj.b}`
      //  })
      // }
    "_rgb.r,_rgb.g,_rgb.b":function(newR,newG,newB){
      // 为data中的fullColor重新赋值
     this.setData({
      fullColor:`${newR},${newG},${newB}`
     })
    }
},
  // 定义生命周期函数
  lifetimes:{
    created(){

    },
    attached(){
      
    }
  },
  // 组件所在页面的生命周期
  pageLifetimes:{
    show(){
      // 渲染随机颜色
      this._randomColor()
    },
    hide(){},
    resize(){},
  }
})

